<template>
    <div class="bottom-bar">
        <div class="check-button">
            <check-button class="check-button-content"
                          @click.native="checkAll"
                          :is-checked="isSelectAll"
                            />
            <div>全选</div>
        </div>
        <div class="total-price">
            合计:￥{{totalPrice}}
        </div>
        <div class="calc" @click="toCalc">
            去计算({{calc}})
        </div>
    </div>
</template>

<script>
    import CheckButton from "components/content/checkButton/CheckButton"
    export default {
        name: "CartBottomBar",
        components:{
            CheckButton
        },
        data(){
            return {
                isCheckAll:false,
                cartList:this.$store.getters.cartList
            }
        },
        methods:{
            checkAll(){
                if(this.isSelectAll){
                    this.cartList.forEach(item => {
                        item.checked=false
                    })
                }else{
                    this.cartList.forEach(item => {
                        item.checked=true
                    })
                }
            },
            toCalc(){
                if(!this.isSelectAll){
                    this.$toast.showToast("请选择需要购买的商品！！！",1200)
                }
            }
        },
        computed:{
            totalPrice(){
                return this.cartList.filter(item => {
                    return item.checked
                }).reduce((preValue, item) => {
                    return preValue + item.newPrice * item.count
                },0).toFixed(2)
            },
            calc(){
                return this.cartList.filter(item => {
                    return item.checked
                }).length
            },
            isSelectAll(){
                if(this.cartList.length === 0) return false
                return !(this.cartList.find(item => !item.checked))
            }
        }
    }
</script>

<style scoped>
    .bottom-bar{
        display: flex;
        height: 44px;
        background-color: #eee;
        position: fixed;
        bottom: 49px;
        left: 0;
        right: 0;
        text-align: center;
        line-height: 44px;
        font-size: 16px;
    }
    .check-button{
        width: 80px;
        display: flex;


    }
    .check-button-content{
        float: left;
        margin: 10px 5px 10px 10px;
        height: 20px;
        width: 20px;
    }
    .total-price{
        flex: 1;
    }
    .calc{
        width: 100px;
        background-color: var(--color-tint);
    }
</style>
